<!--班详情页-->
<template>
  <div class="app-container">
    <p></p>
    <el-table v-loading="loading" :data="stumangeList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="学号" align="center" prop="stuId" />
      <!-- <el-table-column label="头像" align="center" prop="avatar" /> -->
      <el-table-column label="姓名" align="center" prop="stuName" />
      <el-table-column label="性别" align="center" prop="sex" :formatter="formatSex" />
      <el-table-column label="身份证号" align="center" prop="idCard" />
      <el-table-column label="父亲姓名" align="center" prop="fatherName" />
      <el-table-column label="父亲联系电话" align="center" prop="fatherNumber" />
      <el-table-column label="母亲姓名" align="center" prop="motherName" />
      <el-table-column label="母亲联系电话" align="center" prop="motherNumber" />
      <el-table-column label="帐号状态" align="center" prop="status" :formatter="formatStatus" />
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

  </div>
</template>

<script>
import { listStumange, getStumange, delStumange, addStumange, updateStumange, getdownloadFile, getClassGrade } from "@/api/system/stumange";
import { getToken } from "@/utils/auth";
export default {
  name: "Stumange",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      stumangeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open2: true,
      // 查询参数
      queryParams: {
        gradeId: "",
        pageNum: 1,
        pageSize: 10,
        // avatar: null,
        // stuName: null,
        // sex: null,
        // idCard: null,
        // fatherName: null,
        // fatherNumber: null,
        // motherName: null,
        // motherNumber: null,
        // status: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/studentManage/import",
      },

      dialogVisible3: false,
      data: [
        {
          id: 1,
          label: "",
          children: [
            {
              label: "",
            },
          ],
        },
      ],
    };
  },
  created() {
    let gradeId = this.$route.params.gradeId;
    if(gradeId!==undefined){
      sessionStorage.setItem("gradeId", gradeId);
      this.queryParams.gradeId = sessionStorage["gradeId"];
    } else {
      this.queryParams.gradeId = sessionStorage["gradeId"];
    }
    this.getList();
    this.getclassyear();
  },
  methods: {
    //查询班级列表
    async getclassyear() {
      const res = await getClassGrade();
      // console.log(res);
      // for(var i=0;i<res.length;i++){
      this.data = Object.keys(res).map((key) => {
        let obj = {
          id: key,
          label: key,
          children: res[key].map((childKey) => ({
            id: childKey,
            label: childKey,
          })),
        };
        return obj;
      });
    },

    //选择查询的班级
    handleNodeClick(data, node) {
      //   console.log(node.data.label);
      this.queryParams.gradeId = node.data.label;
      this.getList();
    },
    
    //表格中性别数据处理
    formatSex(row, column, cellValue) {
      if (cellValue === "1") {
        return "女";
      } else if (cellValue === "0") {
        return "男";
      }
    },
    formatStatus(row, column, cellValue) {
      if (cellValue === "1") {
        return "停用";
      } else if (cellValue === "0") {
        return "正常";
      }
    },
    /** 查询学生管理列表 */
    getList() {
      this.loading = true;
      listStumange(this.queryParams).then(response => {
        this.stumangeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        stuId: null,
        avatar: null,
        stuName: null,
        sex: null,
        idCard: null,
        fatherName: null,
        fatherNumber: null,
        motherName: null,
        motherNumber: null,
        status: "0"
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.stuId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.open2 = false;
      this.title = "添加学生信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const stuId = row.stuId || this.ids
      getStumange(stuId).then(response => {
        this.form = response
        // this.form.stuName = response.stuName;
        // this.form.idCard = response.idCard;
        // this.form.fatherName = response.fatherName;
        // this.form.fatherNumber = response.fatherNumber;
        // this.form.motherName = response.motherName;
        // this.form.motherNumber = response.motherNumber;

        this.open = true;
        this.open2 = true;
        this.title = "修改学生信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.stuId != null) {
            updateStumange(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addStumange(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const stuIds = row.stuId || this.ids;
      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + stuIds + '"的数据项？').then(function () {
        return delStumange(stuIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    // handleExport() {
    //   this.download('system/stumange/export', {
    //     ...this.queryParams
    //   }, `stumange_${new Date().getTime()}.xlsx`)
    // }
    async gets() {
      console.log("aa")
      const data = await getdownloadFile(this.queryParams.gradeId);
      let fileName = "学生导出模板" + ".xls";
      let blob = new Blob([data], {
        type: "application/vnd.ms-excel",
      });
      // 浏览器兼容性能力检测
      if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
      } else {
        let requestUrl = URL.createObjectURL(blob);
        let downlondTag = document.createElement("a");
        document.body.appendChild(downlondTag);
        downlondTag.href = requestUrl;
        downlondTag.download = fileName;
        downlondTag.click();
        downlondTag.remove();
      }
    },
    //下载导入模板
    async getclass() {
      this.download(
        "/studentManage/exportMoodle",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },

    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
  },
};
</script>
